<!--
功能：图标选择
作者：Maoxiangdong
邮箱：862755519@qq.com
时间：2023-11-21 15:53:30
-->
<template>
  <div>
    <PageTitle title="图标选择组件" subTitle="二次封装的图标选择组件，返回选中的图标编码"></PageTitle>
    <div class="page-content">
      <div class="title-box">下拉图标选择组件<span style="margin-left: 10px;">选中的图标编码：{{ iconClassName }}</span></div>
      <SelectIcon v-model:value="iconClassName" width="352px"/>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const iconClassName = ref("md-mail-open")
</script>
<style lang="scss" scoped>
.page-content {
  box-shadow: 0 0 6px 0 rgba(51, 51, 51, 0.08);
  margin-top: 10px;
  border-radius: 4px;
  padding: 15px;
  background-color: #ffffff;
  .title-box {
    margin-bottom: 10px;
    color: #17233d;
    font-size: 15px;
    font-weight: 600;
  }
}
</style>
